<template>
  <BaseContainer>
    <aplid-base-crud ref="crud" class="w-100" v-bind="{...baseConfig,...$attrs}" :operateFormate="onOperateFormate" :formConfig="formConfig" :saveFormate="saveFormate">
    </aplid-base-crud>

    <AplidDialog v-model="visible" width="75%" :rowData="rowData.dpServiceOrgBase||rowData">
			<DetailPage v-if="visible && operateType == 'detail'" @refresh="handleRefresh" :nowRowData="rowData"></DetailPage>
		</AplidDialog>
  </BaseContainer>
</template>

<script setup lang="ts">
import { baseConfig,operateFormConfig ,api,formateBuilData} from './config'
import AplidDialog from '../components/AplidDialog/index.vue'
import DetailPage from './DetailPage/index.vue'

const visible = ref(false)
const rowData = ref({}) as any
const operateType = ref('detail')
const crud: any = ref(null)
const formConfig = ref(operateFormConfig())

//  处理刷新
const handleRefresh = (query?: any) => {
	visible.value = false
	nextTick(() => {
		crud.value.refreshChange(query)
	})
}
const onOperateFormate = (data, type) => {
	return new Promise((resolve, reject) => {
		if (type == 'detail') {
			visible.value = true
			rowData.value = data || {}
			operateType.value = type
		} else {
      formConfig.value = operateFormConfig(type,data)
      if(type !='edit') {
        data.folkPhone = undefined
        data.folkName = undefined
      }
			resolve(data)
		}
	})
}

const saveFormate = (form,type)=> {
  return new Promise((resolve, reject)=> {
    let model = {
      ...formateBuilData(form),
      dpServiceOrgBase:undefined,
      checkinManageId:rowData.value.id,
      apiName: api[type]
    }
    if(type === 'leave') {
      model = {
         ...formateBuilData(form),
         id:undefined,
         checkinManageId:form.id,
         dpServiceOrgBase:undefined,
         apiName: api[type]
      }
    }
    resolve(model)
  })
}

</script>

<style scoped lang="scss">
:deep(.el-dialog) {
	--el-dialog-border-radius: 10px;
}
:deep(.el-dialog__header) {
	padding: 0;
	margin: 0;
}
</style>